<template>
  <a-card :bordered="false" class="performance-month-add">
    <div class="split-data">
      <div class="base-info">
        <div class="depart-info">新媒体运营中心 {{departName}}</div>
        <div class="performance-total">本月部门奖金总额：{{baseData.depart.performanceAmount}}</div>
        <div class="adjust-total">动态调整金额：{{baseData.depart.adjustAmount}}</div>
      </div>
      <div class="depart-sure">
        部门绩效确认状态：{{baseData.depart.sureStatus == 1 ? '未确认' : '已确认'}}
      </div>
      <div class="performance-info">
        <div class="score-total">部门考评绩效总和：{{baseData.depart.totalScore}}</div>
        <div class="wages-total">部门薪资开支（基础薪资|绩效奖金）：{{baseData.depart.baseAmount}} | {{baseData.depart.performanceAmount}}</div>
        <div class="user-total">成员人数（总数|绩效考评|不考核）：{{baseData.depart.peopleIn}} | {{baseData.depart.peopleIn - baseData.depart.peopleOut}} | {{baseData.depart.peopleOut}}</div>
      </div>
      <!-- 显示一条数据表，实时请求接口，不采用tab -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">

          <span slot="action" slot-scope="text, record">
            <a @click="handleAdjust(record)">调整</a>
          </span>

        </a-table>
      </div>
      <div class="split-info-btn" v-if="baseData.depart.sureStatus == 1">
        <a-button key="submit" type="primary" @click="handleSure">确认考核</a-button>
      </div>
    </div>
    <performance-month-adjust ref="performanceMonthAdjust" @ok="handleOk"></performance-month-adjust>
  </a-card>
</template>

<script>
import Vue from 'vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { queryDepartTreeList } from '@/api/api'
import { getAction, putAction } from '@/api/manage'
import moment from 'moment'
import PerformanceMonthAdjust from './modules/PerformanceMonthAdjust'

export default {
  name: 'DepartPerformanceEdit',
  mixins: [JeecgListMixin],
  components: {
    PerformanceMonthAdjust
  },
  data() {
    return {
      url: {
        list: '/performance/performanceMonthDetail/list'
      },
      columns: [
        {
          title: '工号',
          align: 'center',
          dataIndex: 'workNo'
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'realname'
        },
        {
          title: '岗级',
          align: 'center',
          dataIndex: 'postName'
        },
        {
          title: '岗位',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '岗位绩效',
          align: 'center',
          dataIndex: 'postPreforName'
        },
        {
          title: '薪资属性',
          align: 'center',
          dataIndex: 'salaryTypeName'
        },
        {
          title: '时效绩效',
          align: 'center',
          dataIndex: 'timeScore'
        },
        {
          title: '传播绩效',
          align: 'center',
          dataIndex: 'spreadScore'
        },
        {
          title: '其他绩效',
          align: 'center',
          dataIndex: 'otherScore'
        },
        {
          title: '绩效总分',
          align: 'center',
          dataIndex: 'totalScore'
        },
        {
          title: '绩效奖金/元',
          align: 'center',
          dataIndex: 'scoreAmount'
        },
        {
          title: '基础薪资/元',
          align: 'center',
          dataIndex: 'baseAmount'
        },
        {
          title: '行政调整/元',
          align: 'center',
          dataIndex: 'adminAdjust'
        },
        {
          title: '部门调整/元',
          align: 'center',
          dataIndex: 'departAdjust'
        },
        {
          title: '实发薪资/元',
          align: 'center',
          dataIndex: 'salary'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      departs: [],
      id: 0,
      baseData: {
        performanceMonth: {},
        depart: {},
        all: {}
      },
      disableMixinCreated: true,
      departName: ''
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.departId = this.$route.query.departId
    this.queryParam.perforMonthId = this.id
    this.queryParam.departId = this.departId
    this.departName = this.$route.query.departName
    this.getData()
    this.searchQuery()
  },
  methods: {
    onDateChange() {},
    handleSplit() {},
    getData() {
      const that = this
      var url = '/performance/performanceMonthDepart/getData'
      getAction(url, { departId: this.departId, perforMonthId: this.id }).then(res => {
        if (res.success) {
          console.log(res.result)
          that.baseData = res.result
        }
      })
    },
    handleAdjust(record) {
      this.$refs.performanceMonthAdjust.edit(record, 2)
    },
    handleSure() {
      const that = this
      var url = '/performance/performanceMonthDepart/edit'
      putAction(url, { id: this.baseData.depart.id, sureFlag: 2 }).then(res => {
        if (res.success) {
          this.getData()
          this.searchQuery()
        }
      })
    },
    handleOk() {
      this.getData()
      this.searchQuery()
    }
  }
}
</script>


<style lang="less" scoped>
@import '~@assets/less/common.less';

.performance-month-add {
  padding: 20px 10px;
  background-color: white !important;

  .card-title {
    padding: 0 10px;
    font-size: 15px;
  }

  form {
    margin-top: 20px;
  }

  .split-info-btn {
    text-align: center;
    margin-top: 20px;
  }

  .depart-sure {
    text-align: right;
  }

  .performance-info {
    display: flex;
    padding: 20px 0;

    .score-total {
      margin-right: 20px;
    }

    .wages-total {
      flex: 1;
    }
  }

  .base-info {
    .depart-info {
      padding: 0 0 20px;
      font-size: 15px;
      color: #000;
    }
  }
}
</style>

